<template>
  <div>
    <div>
      <el-button @click="goBack" type="danger" icon="el-icon-arrow-left">
        后退
      </el-button>
    </div>

    <!-- <el-button @click="getDetail">查看</el-button>

    <div>{{ id }}</div> -->

    <div class="title">
      <h1>院级项目的基本信息</h1>
    </div>

    <div class="box">
      <el-tag type="success">项目信息</el-tag>
      <div class="content">
        <div class="content-ul-left">
          <ul>
            <li>
              <span>项目名称 : </span>{{ info.type == null ? "暂无" : info.type }}
            </li>
            <li>
              <span>所属学院 : </span>{{ info.college == null ? "暂无" : info.college }}
            </li>
            <li>
              <span>平均分 : </span>{{ info.average == null ? "暂无" : info.average }}
            </li>
            <li>
              <span>项目负责人: </span>{{ info.leader == null ? "暂无" : info.leader }}
            </li>
            <li>
              <span>项目概要 : </span>{{ info.outline == null ? "暂无" : info.outline }}
            </li>
          </ul>
        </div>

        <div class="content-ul-right">
          <ul>
            <li>
              <span>项目类型 : </span>{{ info.projectType == null ? "暂无" : info.projectType }}
            </li>
            <li>
              <span>项目级别 : </span>{{ info.ranks == null ? "暂无" : info.ranks }}
            </li>
            <li>
              <span>项目评分: </span>{{ info.score == null ? "暂无" : info.score }}
            </li>
            <li>
              <span>指导老师 : </span>{{ info.teacherName == null ? "暂无" : info.teacherName }}
            </li>
            <li>
              <span>项目标题 : </span>{{ info.title == null ? "暂无" : info.title }}
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="box">
      <el-tag type="success">成员信息</el-tag>

      <!-- 学生信息 -->

      <div>
        <el-table style="width: 100%" :data="studat">
          <el-table-column type="expand">
            <template slot-scope="props">

              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="学号">
                  <span>
                    {{ props.row.number ? props.row.number : 'null' }}</span>
                </el-form-item>
                <el-form-item label="名字">
                  <span>{{ props.row.name == 1 ? '负责人' : '普通成员' }}</span>
                </el-form-item>
                <el-form-item label="描述">
                  <span>{{ props.row.name ? props.row.name : 'null' }}</span>
                </el-form-item>
                <el-form-item label="所属学院">
                  <span>{{ props.row.college ? props.row.college : 'null' }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.createTime ? props.row.createTime : 'null' }}</span>
                </el-form-item>
                <el-form-item label="年级">
                  <span>{{ props.row.grade ? props.row.grade : 'null' }}</span>
                </el-form-item>
                <el-form-item label="手机号码">
                  <span>{{ props.row.phone ? props.row.phone : 'null' }}</span>
                </el-form-item>
                <el-form-item label="邮箱">
                  <span>{{ props.row.mailbox ? props.row.mailbox : 'null' }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="学号" prop="number">
          </el-table-column>
          <el-table-column label="学生名称" prop="name">
          </el-table-column>
          <el-table-column label="描述" prop="statu">
            <template slot-scope="scope">
              <div>{{ scope.row.statu == 1 ? '负责人' : '普通成员' }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>



    </div>

    <div class="box">
      <el-tag type="success">材料下载</el-tag>
      <div class="content">
        <!-- <a :href="info.file">点击下载</a> -->
        <a :href="(cdn + '/download/' + info.file)" target="_blank">材料下载</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 1,
      size: "",
      info: {},

      studat: [],
      cdn: window.SITE_CONFIG['baseUrl'],
    };
  },

  mounted() {
    this.id = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    async getDetail() {
      await this.$http({
        url: this.$http.adornUrl("/sys/college/info/" + this.id),
        method: "get",
        params: this.$http.adornParams({
          // 'id':this.id
          //   // 'page': this.pageIndex,
          //   // 'limit': this.pageSize,
          //   // 'key': this.dataForm.key,
          //   // 'userId':
        }),
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message.success("获取成功");
          console.log(data);
          this.info = data.college;
          this.studat = [this.info.stuLeader, ...this.info.studentList];
          console.log(this.studat);
        } else {
          this.$message.error("获取失败" + data.msg);
        }
      });
    },
    goBack() {
      this.$router.back();
    },
    sss(e) {
      console.log(e)
    }
  },
};
</script>

<style lang="scss">
.title {
  // margin: 0 auto;
  text-align: center;
}

.box {
  margin: 20px 0;
  padding: 20px;
  border-radius: 10px;
  background-color: #f2f3f5;

  .content {
    padding: 20px;

    .content-ul-left {
      display: inline-block;
      width: 400px;
    }

    .content-ul-right {
      display: inline-block;
      width: 400px;
    }
  }
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>